<template>
  <view
    class=" border  bg-bg d-flex align-center justify-center img-box"
    :class="type=='head'?' w-60 h-60 rounded-max':'w-100 h-100 rounded'"
    @click="getFile"
  >
    <img class="img" v-if="value" :src="$util.img(value)" alt="" />
    <view v-else class="iconfont fn-30">&#xe608;</view>
    <view v-if="ifUp" class="d-flex align-center justify-center img-loading-box">
      <u-loading mode="circle" color="#f00"></u-loading>
    </view>
  </view>
</template>
<script>
export default {
  name: "v-upload",
  props: {
    value: {
      default: "",
      type: String,
      required: false,
    },
    type:{
      default:''
    }
  },
  data() {
    return {
      ifUp: false,
    };
  },
  methods: {
    getFile() {
      if(this.ifUp) return;
      this.$getImage({
        count: 1,
      }).then((res) => {
        this.upload(res.tempFilePaths[0]);
      });
    },
    // 上传文件
    upload(file) {
      this.ifUp = true;
      this.$uploadFile("/upImage", { file })
        .then((res) => {
          this.$emit("input", res.data);
        })
        .finally(() => {
          this.ifUp = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.img-box {
  position: relative;
  overflow: hidden;
  .img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .img-loading-box {
    position: absolute;
    z-index: 9;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    backdrop-filter: blur(2px);  
    background: rgba($gray-1 ,.2);
  }
}
</style>